@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
    height: 100%;
    font-size: 16px;
}

::-webkit-scrollbar {
    height: 1rem;
    width: 0.5rem;
}

::-webkit-scrollbar:horizontal {
    height: 0.5rem;
    width: 1rem;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(217, 217, 227, 0.8);
    border-color: rgb(255, 255, 255);
    border-radius: 9999px;
    border-width: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(236, 236, 241);
}

.dark ::-webkit-scrollbar-thumb {
    background-color: rgb(86, 88, 105);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(172, 172, 190);
}

.animated-underline {
    cursor: url("/images/new-tab.png") 10 10, pointer;
    background-image: linear-gradient(#33333300, #33333300),
        linear-gradient(to right, #34d399, #00b981);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: 0.3s ease;
    transition-property: background-size, color, background-color, border-color;
}
.animated-underline:hover {
    background-size: 0 2px, 100% 2px;
}
